﻿<%@ Page Language="VB" 
    AutoEventWireup="false" 
    CodeFile="Music.aspx.vb" 
    Inherits="Music"
    EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <link href="CSS/Music.css" rel="stylesheet" type="text/css" />
    <link href="Javascript/jquery.jgrowl.css" rel="stylesheet" type="text/css" />
    <script src="Javascript/jquery.js" type="text/javascript"></script>
    <script src="Javascript/jquery.jgrowl.js" type="text/javascript"></script>
    <title>Musica</title>
</head>

<body bgcolor="#0b5eba">
    <form id="form1" runat="server" defaultbutton="btnDefault">

    <asp:ScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        function EndRequestHandler(sender, args)
        {
            /* setTimeout("setEvents()", 1000); */
        }    
    </script>

    <asp:UpdatePanel runat="server" ID="updPanel">
    <ContentTemplate>

    <asp:HiddenField ID="cmdName" runat="server" />
    <asp:HiddenField ID="cmdArg" runat="server" />
    <asp:HiddenField ID="btnText" runat="server" />
    <asp:HiddenField ID="currentMenu" runat="server" />
    <asp:HiddenField ID="PlaylistId" runat="server" />
    <asp:HiddenField ID="PlaylistRowId" runat="server" />
    <asp:HiddenField ID="currentSongId" runat="server" />
    <asp:HiddenField ID="currentSongTitle" runat="server" />
    <asp:HiddenField ID="currentSongArtistName" runat="server" />
    <asp:HiddenField ID="btnPrevClassName" runat="server" />
    <asp:HiddenField ID="btnPrevOnClick" runat="server" />
    <asp:HiddenField ID="btnPlayClassName" runat="server" />
    <asp:HiddenField ID="btnPlayOnClick" runat="server" />
    <asp:HiddenField ID="btnNextClassName" runat="server" />
    <asp:HiddenField ID="btnNextOnClick" runat="server" />

    <asp:UpdateProgress ID="UpdateProgress1" runat="server"
        DisplayAfter="250">
        <ProgressTemplate>            
            <div id="activityIndicator"></div>
        </ProgressTemplate>    
    </asp:UpdateProgress>  			
    
	<div id='library-container'>

		<div id='library-breadcrumb-container'>
	        <asp:ListView ID="lstBreadcrumb" runat="server">
			    <LayoutTemplate>
			        <asp:PlaceHolder runat="server" id="itemPlaceHolder">
			        </asp:PlaceHolder>
			    </LayoutTemplate>
			    <ItemTemplate>
			        <asp:Panel ID="pnlBreadcrumbItem" runat="server"
			            cssclass="breadcrumbItem">
			            <asp:LinkButton ID="btnBreadcrumb" runat="server" />
			        </asp:Panel>
			    </ItemTemplate>
            </asp:ListView>
			<asp:Panel ID="pnlLastBreadcrumbItem" runat="server">
			    <asp:Label ID="lblLastBreadcrumb" runat="server"
			        cssclass="lastBreadcrumbItem" />
			</asp:Panel>
		</div>

		<div id='library-search-container'>
			<div id='library-search'>
			    <asp:TextBox ID="txtSearch" runat="server" />
			</div>
		</div>

		<div id='library-main-container'>
			<div id='library-menu'>
				<ul>
					<li class="menu-item">
					<asp:LinkButton id="btnSongs" 
					                CommandName="Songs" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Canciones"
					                 />					
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnArtists" 
					                CommandName="Artists" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Artistas"
					                 />
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnAlbums" 
					                CommandName="Albums" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Discos"
					                 />					
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnPlaylists" 
					                CommandName="Playlists" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Listas"
					                 />
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnGenres" 
					                CommandName="Genres" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Estilos"
					                 />					
					</li>
					<li class="menu-item">
					<asp:LinkButton id="btnStatistics" 
					                CommandName="Statistics" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Historia"
					                 />										
					<li class="menu-item">
					<asp:LinkButton id="btnSelected" 
					                CommandName="Selected" 
					                runat="server" 
					                onclientclick="LibraryRowsFadeOut();"
					                Text="Selección"
					                 />					
					</li>
					
				</ul>
				
			</div>
			
			<asp:panel id='LibraryMain' runat="server">
			    <div id='LibraryRows' style="display:none">
			    <asp:ListView ID="lstMain" runat="server">
			        <LayoutTemplate>
			            <asp:PlaceHolder runat="server" id="itemPlaceHolder"></asp:PlaceHolder>
			        </LayoutTemplate>
			        <ItemTemplate>
			            <asp:Panel ID="pnlRow" runat="server" 
			                CssClass="row">
    			                <asp:Panel ID="pnlmainColumn" runat="server" 
    			                    CssClass="mainColumn">
    			                    <asp:LinkButton ID="btnMain" runat="server" 
    			                    OnClientClick="javascript:fadeOutpnlRow();"/>
    			                </asp:Panel>
    			                <asp:Panel ID="PanelUp" runat="server" 
    			                    CssClass="buttonUp">
    			                    <asp:LinkButton ID="btnUp" runat="server" 
    			                        Text="&nbsp"/>
    			                </asp:Panel>
    			                <asp:Panel ID="PanelDown" runat="server" 
    			                    CssClass="buttonDown">
    			                    <asp:LinkButton ID="btnDown" runat="server" 
    			                        Text="&nbsp"/>
    			                </asp:Panel>
    			                <asp:Panel ID="pnlDelete" runat="server" 
    			                    CssClass="buttonDelete">
    			                    <asp:LinkButton ID="btnDelete" runat="server" 
    			                        Text="&nbsp"/>
    			                </asp:Panel>
    			                <asp:Panel ID="pnlEdit" runat="server" 
    			                    CssClass="buttonEdit">
    			                    <asp:LinkButton ID="btnEdit" runat="server" 
    			                        OnClientClick="javascript:fadeOutpnlRow();"
    			                        Text="&nbsp"/>
    			                </asp:Panel>
    			                <asp:Panel ID="pnlAdd" runat="server" 
    			                    CssClass="buttonAdd">
    			                    <asp:LinkButton ID="btnPlus" runat="server" 
    			                        Text="&nbsp"/>
    			                </asp:Panel>

                        </asp:Panel>
			        </ItemTemplate>
			    </asp:ListView>
			    </div>
			    
			    <asp:panel id='EditTag' runat ="server"
			        visible="false" 
			        CssClass = "EditPanel">
			        <asp:Label id="lblTagTitle" runat="server"
			            CssClas = "EditTitle"
			            Text = "Modificación de Estilos" />
			        <div id="TagEditBox" class="EditBox">
	    		        <p>Estilo:</p>
			            <asp:TextBox ID="txtEstilo" runat="server"
			                CssClass="EditTextBoxes" />
                        <div class="editButtons">
                            <asp:Button ID="btnOkEditTag" runat="server" Text="Guardar" />
                            <asp:Button ID="btnCancelEditTag" runat="server" 
                                Text="Cancelar"
                                OnClientClick='$(".EditPanel").fadeOut(100);' />
                        </div>
			        </div>
			    </asp:panel>

			    <asp:panel id='EditArtist' runat ="server"
			        visible="false" 
			        CssClass = "EditPanel">
			        <asp:Label id="lblArtistTitle" runat="server"
			            CssClas = "EditTitle"
			            Text = "Modificación de Nombre del Artista" />
			        <div id="ArtistEditBox" class="EditBox">
	    		        <p>Artista:</p>
			            <asp:TextBox ID="txtArtista" runat="server"
			                CssClass="EditTextBoxes" />
                        <div class="editButtons">
                            <asp:Button ID="btnOkEditArtist" runat="server" Text="Guardar" />
                            <asp:Button ID="btnCancelEditArtist" runat="server" 
                                Text="Cancelar"
                                OnClientClick='$(".EditPanel").fadeOut(100);' />
                        </div>
			        </div>
			    </asp:panel>

			    <asp:panel id='EditSong' runat ="server"
			        visible="false" 
			        CssClass = "EditPanel">
			        <asp:Label id="lblSongEdit" runat="server"
			            CssClas = "EditTitle"
			            Text = "Modificación de los Datos de la Canción" />
			        <div id="SongEditBox" class="EditBox">
	    		        <p>Canción:</p>
			            <asp:TextBox ID="txtCancion" runat="server"
			                CssClass="EditTextBoxes" />
	    		        <p>Disco:</p>
			            <asp:TextBox ID="txtAlbum" runat="server"
			                CssClass="EditTextBoxes" />
	    		        <p>Artista:</p>
			            <asp:TextBox ID="txtArtist" runat="server"
			                CssClass="EditTextBoxes" />
			                
                        <div class="editButtons">
                            <asp:Button ID="btnOkEditSong" runat="server" 
                                Text="Guardar" />
                            <asp:Button ID="btnCancelEditSong" runat="server" 
                                Text="Cancelar"
                                OnClientClick='$(".EditPanel").fadeOut(100);' />
                        </div>
			        </div>
			    </asp:panel>
			    
			</asp:panel>

		</div>

		<div id='library-footer-container'>

            <asp:LinkButton ID="btnPrev" runat="server"
                OnClientClick="javascript:return false;"
                CssClass="btnPrev btnPrevDimmed" />

            <asp:LinkButton ID="btnPlay" runat="server"
                OnClientClick="javascript:return false;"
                CssClass="btnPlay btnPlayDimmed" />

            <asp:LinkButton ID="btnNext" runat="server"
                OnClientClick="javascript:return false;"
                CssClass="btnNext btnNextDimmed" />

            <asp:LinkButton ID="btnSaveSelection" runat="server" 
                OnClientClick="javascript:fnSetFocus();"
                cssclass="action-button"
                Text="Guardar Sel." />
                
            <asp:LinkButton ID="btnDeleteSelection" runat="server" 
                OnClientClick="javascript:clear_Playlist();return false;"
                cssclass="action-button"
                Text="Limpiar Sel." />

            <asp:LinkButton ID="btnCopySelection" runat="server" 
                OnClientClick="return false;"
                cssclass="action-button"
                Text="Copiar Sel." />

            <asp:Button ID="btnDefault" runat="server" style="display:none" />
		</div>

        <div id="library-song-title">
            <asp:Label ID="lblSongTitle" runat="server" EnableViewState="true" />
        </div>
		
	</div>

    <asp:Panel ID="pnlSave" runat="server"
        CssClass="modalPopup"
        Style="display:none">
        <div class="modalTitle">Nombre de la lista:</div>
        <div class="modalContent">
            <asp:TextBox ID="txtListName" runat="server"></asp:TextBox>
        </div>
        <div class="modalButtons">
            <asp:Button ID="btnOkSave" runat="server" Text="Guardar" OnClientClick="javascript:save_Playlist();return false;" />
            <asp:Button ID="btnCancelSave" runat="server" Text="Cancelar" />
        </div>
    </asp:Panel>

    <asp:Panel ID="pnlDeletePlaylist" runat="server"
        CssClass="modalPopup"
        Style="display:none">
        <div class="modalTitle">¿Borrar Lista?</div>
        <div class="modalContent">
            ¿Está seguro que quiere borrar la lista?
        </div>
        <div class="modalButtons">
            <asp:Button ID="btnOkDelete" runat="server" Text="Borrar" />
            <asp:Button ID="btnCancelDelete" runat="server" Text="Cancelar" />
        </div>
    </asp:Panel>

    <ajaxToolkit:ModalPopupExtender ID="mpeSave" runat="server"
        TargetControlID = "btnSaveSelection"
        PopupControlID = "pnlSave" 
        OkControlID="btnOkSave" 
        CancelControlID="btnCancelSave" 
        BackgroundCssClass="modalBackground" />

    <ajaxToolkit:ModalPopupExtender ID="mpeDeletePlaylist" runat="server"
        TargetControlID = "PlaylistId"
        PopupControlID = "pnlDeletePlaylist" 
        OkControlID="btnOkDelete" 
        CancelControlID="btnCancelDelete" 
        BackgroundCssClass="modalBackground" />

    </ContentTemplate>
    </asp:UpdatePanel>

    <script language="javascript" type="text/javascript">

        /*--------------------------------------------------------------*/
        function play_song(songId,isPlayingFromPlaylist)
        {
            parent.hiddenFrame.play_song(songId,isPlayingFromPlaylist);
        }

        function play_song_from_playlist(songId) {
            parent.hiddenFrame.play_song(songId, true);
        }

        function player_song_changed(songId)
        {
            if (songId != 0)
            {
                if (songId != $('#currentSongId')[0].value)
                {
                    if ($('#currentSongId')[0].value != "")
                    {
                        updateRowClass($('#currentSongId')[0].value,"unselect");
                    }
                    updateRowClass(songId,"select");
                    $('#currentSongId')[0].value = songId;
                    PageMethods.PlayerStatusChanged(update_display)
                }
            }
            else
            {
                if ($('#currentSongId')[0].value != "")
                {
                    updateRowClass($('#currentSongId')[0].value,"unselect");
                    $('#currentSongId')[0].value = "";
                }
                PageMethods.PlayerStatusChanged(update_display);
            }
        }

        function update_display(displayStatus)
        {
            $('#lblSongTitle').text(displayStatus[0]);
            
            document.getElementById('btnPrev').className = displayStatus[2];
            document.getElementById('btnPrev').onclick = new Function(displayStatus[3]);
            
            document.getElementById('btnPlay').className = displayStatus[4];
            document.getElementById('btnPlay').onclick = new Function(displayStatus[5]);
            
            document.getElementById('btnNext').className = displayStatus[6];
            document.getElementById('btnNext').onclick = new Function(displayStatus[7]);

            var buttonDisplay = "";
            if (displayStatus[8] == 0)
                buttonDisplay = "none";
            document.getElementById("btnSaveSelection").style.display = buttonDisplay;
            document.getElementById("btnDeleteSelection").style.display = buttonDisplay;
            document.getElementById("btnCopySelection").style.display = buttonDisplay;

            return false;
        }

        function updateRowClass(songId,action)
        {
            var d = $('#LibraryRows .row');
            for(var i = 0; i < d.length; i++)
            {
                if (d[i].innerHTML.indexOf('play_song(' + songId) != -1)
                { 
                    if (action == "select")
                    {
                        d[i].className += " selected";
                        return;
                    }
                    else
                    {
                        if (d[i].className.indexOf(" selected") != -1)
                        {
                            d[i].className = d[i].className.substring(0,d[i].className.indexOf(" selected"));
                            return;
                        }
                    }
                }
            }
        }

        /*--------------------------------------------------------------*/
        
        function remove_song(songId,RowId)
        {
            var d = document.getElementById('LibraryRows');
            var old = document.getElementById(RowId);
            d.removeChild(old);
            PageMethods.Remove(songId,update_display);
        }

        function add_song_to_current_playlist(songId)
        {
            $.jGrowl('Se agregó la canción a la selección');
            PageMethods.AddSongToCurrentPlaylist(songId,update_display);
        }

        function add_album_to_current_playlist(albumId, artistId, tagId)
        {
            $.jGrowl('Se agregó el disco a la selección');
            PageMethods.AddAlbumToCurrentPlaylist(albumId,artistId,tagId,update_display);
        }

        function add_artist_to_current_playlist(artistId)
        {
            $.jGrowl('Se agregaron las canciones a la selección');
            PageMethods.AddArtistToCurrentPlaylist(artistId,update_display);
        }

        function add_playlist_to_current_playlist(playlistId,playlistName)
        {
            document.getElementById('txtListName').value = playlistName;
            $.jGrowl('Se agregó la lista a la selección');
            PageMethods.AddPlaylistToCurrentPlaylist(playlistId,update_display);
        }

        /*--------------------------------------------------------------*/

        function Previous()
        {
            PageMethods.Previous(play_song_from_playlist);
            return false;
        }

        function Next()
        {
            PageMethods.Next(play_song_from_playlist);
            return false;
        }

        function Pause() {
            parent.hiddenFrame.pause();        
            document.getElementById('btnPlay').className = "btnPlay";
            document.getElementById('btnPlay').onclick = new Function("Play();return false;");
            return false;
        }

        function Play()
        {
            parent.hiddenFrame.play();
            document.getElementById('btnPlay').className = "btnPlay btnPause";
            document.getElementById('btnPlay').onclick = new Function("Pause();return false;");
            return false;
        }

        /*--------------------------------------------------------------*/

        function move_down(songId,RowId)
        {
            var d = document.getElementById('LibraryRows');
            var x = document.getElementById(RowId);
            if (d.lastChild != x)
            {
                var y = x.nextSibling;
                d.insertBefore(y, x);
                $("#" + RowId)[0].removeClass('hover');
                PageMethods.MoveDown(songId);                
            }
            return false;
        }

        function move_up(songId,RowId)
        {
            var d = document.getElementById('LibraryRows');
            var x = document.getElementById(RowId);
            if (d.firstChild != x)
            {
                var y = x.previousSibling;
                d.insertBefore(x,y);
                $("#" + RowId)[0].removeClass('hover');
                PageMethods.MoveUp(songId);
            }
            return false;
        }

        /*--------------------------------------------------------------*/
        
        function fnSetFocus()
        {
        	setTimeout("fnFocus()",250);
        }
  
        function fnFocus()
        {
            eval("document.getElementById('txtListName').focus()");
        }

        /*--------------------------------------------------------------*/

        function setAction(parCmdName, parCmdArg, ItemId) {
            LibraryRowsFadeOut();            
            theForm.cmdName.value = parCmdName;
            theForm.cmdArg.value = parCmdArg;
            theForm.btnText.value = $("#" + ItemId).text();
        }

        /*--------------------------------------------------------------*/

        function save_Playlist()
        {
            PageMethods.SavePlaylist(document.getElementById('txtListName').value,aviso_ok,aviso_error)   
        }
        
        function clear_Playlist()
        {
            if (document.getElementById("currentMenu").value == "Selected")
            {
                var d = document.getElementById('LibraryRows');
                while (d.hasChildNodes()) 
                {
                    d.removeChild(d.lastChild);
                }
            }
            document.getElementById('txtListName').value = '';
            $.jGrowl('Se borró la lista');
            PageMethods.ClearCurrentPlaylist(update_display, aviso_error);
        }

        /*--------------------------------------------------------------*/
        
        function aviso_ok(msg)
        {
            if (msg != '')
            {
                $.jGrowl(msg);
            }
            return false;
        }

        function aviso_error()
        {
            $.jGrowl('Se produjo un error');
            return false;
        }

        /*--------------------------------------------------------------*/
        
        function confirm_delete_playlist(playlistId,playlistRowId)
        {
            document.getElementById('PlaylistId').value = playlistId;
            document.getElementById('PlaylistRowId').value = playlistRowId;
            $find('mpeDeletePlaylist').show();
        }        

        function delete_playlist()
        {
            var d = document.getElementById('LibraryRows');
            var row = document.getElementById('PlaylistRowId').value;
            var playlistId = document.getElementById('PlaylistId').value;
            var old = document.getElementById(row);
            d.removeChild(old);
            PageMethods.DeletePlaylist(playlistId, aviso_ok);
        }

        /*--------------------------------------------------------------*/

        function pageLoad()
        {
            setEvents();
            PageMethods.PlayerStatusChanged(update_display);
        }

        function setEvents() {
            $('.row').hover(
                function() {
                    $(this).addClass('hover');
                },
                function() {
                    $(this).removeClass('hover');
                }
            );

            $('.menu-item').hover(
                function() {
                    $(this).addClass('hover');
                },
                function() {
                    $(this).removeClass('hover');
                }
            );
        }

        function EndRequestHandler(sender, args) {
            $("#LibraryRows").fadeIn(300);
            setTimeout(function() { $("#txtSearch").focus() }, 50);
        }

        function LibraryRowsFadeOut() {
            $("#LibraryRows").fadeOut(100);
        }

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

        $(document).ready(function(){
            setTimeout(function() { $("#txtSearch").focus() }, 50) }); 
 
    </script>
	
    </form>
</body>

</html>
